import styles from './FucApp.module.scss'

export default function FucApp() {

    return (<div className={styles.fucContanier}>
        <h3>交互demo
        </h3>
        <Toolbar
            playMovie={() => alert('Playing!')}
            uploadImage={() => alert('Uploading!')}
        />
    </div>
    )
}

function Toolbar({ playMovie, uploadImage }: { playMovie: () => void, uploadImage: () => void }) {
    return (
        <div>
            <Button onClick={playMovie} className={styles.left}> Play Movie</Button>
            <Button onClick={uploadImage}> Upload Image</Button>
        </div>
    )
}

// interface BarProps {
//     playMovie: () => void
//     uploadImage: () => void
// }

interface ButtonProps {
    onClick: () => void
    children: React.ReactNode
    style?: React.CSSProperties
    className?: string
}

function Button({ onClick, children, className }: ButtonProps) {
    return <button onClick={onClick} className={className}>
        {children}
    </button>
}